<template>
	<Layout style="height: 100%" class="main">
		<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
			<side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
				<!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
				<div class="logo-con">
					<img v-show="!collapsed" :src="maxLogo" key="max-logo" @click='home' id="maxImg" />
					<img v-show="collapsed" :src="minLogo" key="min-logo" @click='home' id="minImg" />
				</div>
			</side-menu>
		</Sider>
		<Layout>
			<Header class="header-con">
				<header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
					<user :user-avator="userAvator" />
					<fullscreen v-model="isFullscreen" style="margin-right: 10px;" />
					<Tooltip content="刷新">
						<img class="refresh" src="../../assets/images/ref.png" @click="refresh" alt="">
					</Tooltip>
				</header-bar>
			</Header>

			<Content class="main-content-con">
				<Layout class="main-layout-con">
					<div class="tag-nav-wrapper">
						<tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag" />
					</div>

					<Content class="content-wrapper">
						<keep-alive :include="cacheList">
							<router-view/>
						</keep-alive>
					</Content>
				</Layout>
			</Content>
		</Layout>
	</Layout>
</template>
<script>
	import SideMenu from './components/side-menu'
	import HeaderBar from './components/header-bar'
	import TagsNav from './components/tags-nav'
	import User from './components/user'
	import Fullscreen from './components/fullscreen'
	import { mapMutations, mapActions } from 'vuex'
	import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util'
	import minLogo from '@/assets/images/m-logo.png'
	import maxLogo from '@/assets/images/l-logo.png'
	import './main.less'
	export default {
		name: 'Main',
		inject: ['reload'],
		components: {
			SideMenu,
			HeaderBar,
			TagsNav,
			Fullscreen,
			User
		},
		data() {
			return {
				collapsed: false,
				minLogo,
				maxLogo,
				isFullscreen: false,
				list: [],
				menuList: [],
				i: 0,
			}
		},
		computed: {
			tagNavList() {
				return this.$store.state.app.tagNavList
			},
			tagRouter() {
				return this.$store.state.app.tagRouter
			},
			userAvator() {
				return this.$store.state.user.avatorImgPath
			},
			cacheList() {
				return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []
			},
			local() {
				return this.$store.state.app.local
			}
		},
		methods: {
			getMenuList() {
				let token = localStorage.getItem('mytoken');
				let menuList = JSON.parse(localStorage.menu);
				this.axios.get('admin/index/authorize', {
					headers: {
						Authorization: 'bearer ' + token
					}
				}).then(res => {
					if(res.data.code == 200) {
						let authorize = res.data.data;
						localStorage.Review = authorize.indexOf(17) == -1 ? false : true;

						if(authorize.indexOf(37) == -1) {
							menuList.splice(4, 1);
						}

						if(authorize.indexOf(32) == -1) {
							menuList.splice(3, 1);
						} else {
							if(authorize.indexOf(79) == -1) {
								menuList[3].children.splice(1, 1);
							}
							if(authorize.indexOf(33) == -1) {
								menuList[3].children.splice(0, 1);
							}
						}

						if(authorize.indexOf(28) == -1) {
							menuList.splice(2, 1);
						} else {
							if(authorize.indexOf(31) == -1) {
								menuList[2].children.splice(2, 1);
							}
							if(authorize.indexOf(30) == -1) {
								menuList[2].children.splice(1, 1);
							}
							if(authorize.indexOf(29) == -1) {
								menuList[2].children.splice(0, 1);
							}
						}

						if(authorize.indexOf(15) == -1) {
							menuList.splice(1, 1);
						} else {
							if(authorize.indexOf(78) ==-1) {
								menuList[1].children.splice(5, 1);
							}
							if(authorize.indexOf(77) == -1) {
								menuList[1].children.splice(4, 1);
							}
							if(authorize.indexOf(20) == -1) {
								menuList[1].children.splice(3, 1);
							}
							if(authorize.indexOf(19) == -1) {
								menuList[1].children.splice(2, 1);
							}
							if(authorize.indexOf(18) == -1) {
								menuList[1].children.splice(1, 1);
							}
							if(authorize.indexOf(17) == -1) {
								menuList[1].children.splice(0, 1);
							}
						}
						
						if(authorize.indexOf(6) == -1) {
							menuList.splice(0, 1);
						} else {
							if(authorize.indexOf(9) == -1) {
								menuList[0].children.splice(2, 1);
							}
							if(authorize.indexOf(8) == -1) {
								menuList[0].children.splice(1, 1);
							}
							if(authorize.indexOf(7) == -1) {
								menuList[0].children.splice(0, 1);
							}
						}
					}	
					this.menuList = menuList;
				})
			},
			refresh() {
				this.reload()
			},
			home() {
				this.$router.push({
					name: 'home'
				})
			},
			...mapMutations([
				'setBreadCrumb',
				'setTagNavList',
				'addTag',
				'setLocal'
			]),
			...mapActions([
				'handleLogin'
			]),
			turnToPage(route) {
				let {
					name,
					params,
					query
				} = {}
				if(typeof route === 'string') name = route
				else {
					name = route.name
					params = route.params
					query = route.query
				}
				if(name.indexOf('isTurnByHref_') > -1) {
					window.open(name.split('_')[1])
					return
				}
				this.$router.push({
					name,
					params,
					query
				})
			},
			handleCollapsedChange(state) {
				this.collapsed = state;
				if(state) {
					document.getElementsByClassName('logo-con')[0].style.height = '0';
				} else {
					document.getElementsByClassName('logo-con')[0].style.height = 'auto';
				}
			},
			handleCloseTag(res, type, route) {
				let openName = ''
				if(type === 'all') {
					this.turnToPage('home')
					openName = 'home'
				} else if(routeEqual(this.$route, route)) {
					if(type === 'others') {
						openName = route.name
					} else {
						const nextRoute = getNextRoute(this.tagNavList, route)
						this.$router.push(nextRoute)
						openName = nextRoute.name
					}
				}
				this.setTagNavList(res)
				this.$refs.sideMenu.updateOpenName(openName)
			},
			handleClick(item) {
				this.turnToPage(item)
			}
		},
		watch: {
			'$route' (newRoute) {
				this.setBreadCrumb(newRoute.matched)
				this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
			}
		},
		mounted() {
			/**
			 * @description 初始化设置面包屑导航和标签导航
			 */
			this.setTagNavList()
			this.addTag({
				route: this.$store.state.app.homeRoute
			})
			this.setBreadCrumb(this.$route.matched)
			// 设置初始语言
			this.setLocal(this.$i18n.locale)
			// 文档提示
			// this.getList()
			localStorage.menu = JSON.stringify(this.$store.getters.menuList);
			this.menuList = this.$store.getters.menuList
			this.getMenuList();
		}
	}
</script>

<style>
	#minImg {
		height: auto;
		width: 30px;
	}
	
	#maxImg {
		height: 37px;
		/*height: auto;*/
		/*width: 100%;*/
	}
	
	.main .logo-con {
		height: auto;
	}
</style>